<template>
  <div>
    <ylheader @save="savecaogao" :lefttext="true" @send='sendcomment' :lefttexts="'取消'" :title="mytitle" :righttext="true" :righttexts="'发送'"></ylheader>
    <div>
      <div class="loadmore-container" ref="searchWrapper">
        <div class="loadmore-ul">
          <publishcomments :textareatexts="content" :thumbnailslist="pics" @haha="textareatext" @commentpics="uploadpics" @changeTextArea="changeTextArea"></publishcomments>
        </div>
      </div>
    </div>

  </div>
</template> 
<script>
import ylheader from "src/components/yl-header.vue";
import publishcomments from "src/components/addcomments.vue";
import { Cell } from "mint-ui";
import api from "src/api/index";

export default {
  name: "publishcommentss",
  data () {
    return {
      mytitle: this.$route.query.title,
      content: "",
      pics: [],
      uploadpictures: [],
      picstring: [],
      caogaoid: "",
      doubleclick: false,
      partcomment: { atName: "", content: "", id: "", nickName: "", parentType: "", peplyId: "", picUrls: [], userId: "" },
    };
  },
  mounted () {
    this.initTopicquerydraft().then(data => {
      return this.initScroll();
    });
  },
  components: {
    ylheader,
    publishcomments,
    Cell
  },
  methods: {
    initTopicquerydraft () {
      let p = new Promise((resolve, reject) => {
        const data = {
          id: this.$route.query.topicId,
          type: this.$route.query.type
        };
        api.Querytopicquerydraft(data).then(res => {
          if (res.success) {
            if (res.data) {
              this.pics = res.data.picUrls;
              this.content = res.data.content;
              this.caogaoid = res.data.id;
            }
          }
          resolve("获取讨论草稿...");
        });
      });
      return p;
    },
    //初始化scroll
    initScroll () {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let searchWrapper = this.$refs.searchWrapper;
          this.setScroll(searchWrapper, this);
        });
        resolve("初始化scroll结束...");
      });
      return p;
    },
    setScroll (searchWrapper, _this) {
      localStorage.tempPageHeight = document.getElementsByClassName(
        "loadmore-ul"
      )[0].scrollHeight;
      _this.myscroll = new iScroll(searchWrapper, {
        //上拉时触发
        onScrollMove: function () {
          if (
            this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
            _this.is_r == false
          ) {
            //加载数据
            _this.is_r = true;
          }
        },
        onScrollEnd: function () { },
        onScrollStart: function () {
          if (
            localStorage.tempPageHeight !=
            document.getElementsByClassName("loadmore-ul")[0].scrollHeight
          ) {
            this.refresh();
            localStorage.tempPageHeight = document.getElementsByClassName(
              "loadmore-ul"
            )[0].scrollHeight;
          }
        }
      });
    },
    textareatext (data) {
      this.content = data;
    },
    uploadpics (data) {
      this.uploadpictures = data;
    },
    sendcomment () {
      if (this.doubleclick) {
        return;
      }
      this.doubleclick = true;
      this.uploadpictures = [...this.pics];
      const array = [];
      _each(this.uploadpictures.slice(0, 9), (v, i) => {
        array.push(v.src);
      });
      this.picstring = array.join(",");

      if (!this.content && !this.picstring) {
        this.$toast("请编辑内容");
        this.doubleclick = !this.doubleclick;
        return;
      }
      // this.content = this.$util.getTextUrl(this.content);
      const data = {
        topicId: this.$route.query.topicId,
        parentId: this.$route.query.parentId,
        type: this.$route.query.type,
        peplyId: this.$route.query.peplyId,
        content: this.content,
        picUrls: this.picstring,
        parentType: this.$route.query.parentType,
        id: this.caogaoid,
        token: localStorage.getItem("token"),
        draft: 0//草稿
      };
      api.QuerytopicAddComment(data).then(res => {
        if (res.success) {
          this.$toast("发布成功");
          if (this.$route.query.type == 0) {
            this.$util.saveFootPrint({ actType: 1, typeValue: res.value });//用户轨迹
          } else {
            this.$util.saveFootPrint({ actType: 2, typeValue: res.value });//用户轨迹
          }
          if (typeof this.$route.query.commentId != "undefined") {
            this.updatecommentlist();
          } else {
            this.$router.go(-1);
          }
        } else {
          if (res.msg.indexOf("token") != "-1") {
            this.$toast("token失效");
          } else {
            this.$toast(res.msg);
          }
          this.doubleclick = false;
        }
      });
    },
    savecaogao () {
      if (this.doubleclick) {
        return;
      }
      this.doubleclick = true;
      this.uploadpictures = [...this.pics];
      const array = [];
      _each(this.uploadpictures.slice(0, 9), (v, i) => {
        array.push(v.src);
      });
      this.picstring = array.join(",");

      if (!this.content && !this.picstring) {
        this.doubleclick = false;
        this.$router.go(-1);
        return;
      }
      const data = {
        topicId: this.$route.query.topicId,
        type: this.$route.query.type,
        content: this.content,
        pictureUrl: this.picstring,
        id: this.caogaoid,
        draft: 1//草稿
      };
      api.Querytopicsavedraft(data).then(res => {
        if (res.success) {
          this.$router.go(-1);
        } else {
          this.doubleclick = false;
          this.$toast(res.msg);
        }
      }).catch(error => {
        this.doubleclick = false;
      });;
    },
    changeTextArea () {
      this.$nextTick(() => {
        this.myscroll.refresh();
      });
    },
    updatecommentlist () {
      const data = {
        page: 1,
        limit: 10,
        id: this.$route.query.commentId
      };
      //将commentcounts做了修改
      api.QuerytopicCommentDetail(data).then(res => {
        if (res.success) {
          if (typeof this.$route.query.topicIndex != "undefined") {
            let topicDetailObj = JSON.parse(localStorage.topicDetailStorage);
            topicDetailObj.commentlist[this.$route.query.topicIndex]
              .commentCount++;
            topicDetailObj.commentlist[this.$route.query.topicIndex].commentList.unshift(res.data.commentList.list[0]);
            topicDetailObj.commentlist[this.$route.query.topicIndex].commentList.splice(topicDetailObj.commentlist[this.$route.query.topicIndex].commentList.length - 1, 1);
            let tempTopicDetailObj = JSON.stringify({
              commentlist: topicDetailObj.commentlist,
              currPage: topicDetailObj.currPage,
              totalPage: topicDetailObj.totalPage,
              totalCount: topicDetailObj.totalCount
            });
            localStorage.topicDetailStorage = tempTopicDetailObj;
          };
          this.$router.go(-1);
        }
      })
    },
  }
};
</script>
<style lang="less" scoped>
.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}

.loadmore-ul {
  padding-bottom: 0.2rem;
  list-style: none;
}
</style>
